<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I create two columns on a Lessons page?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I create two columns on a Lessons page?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_0496561F-F082-4AF3-89E3-CB427939A2A1" class="text-block-content">
    <p>Adding two columns on a Lessons page breaks up one big block or one section into smaller pieces so that the page is more readable and flows better. It also makes better use of the white space on the page. </p>
<p>Adding two columns on a Lessons page involves two steps. </p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Go to Lessons.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/054/002/original/59bffb1e-4e9e-40c2-8514-54a49e1e6b19.png" alt="" height="110" width="202">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_27DBD86C-0058-45E6-9F32-C58833D2452C" class="text-block-content">
    <p>If you titled your page something other than <em>Lessons</em>, select the title of the page as it appears in your Tool Menu.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_726C9C1D-5DDB-4B67-83E8-CD7DF1C78EED" class="text-block-content">
    <p>Click on the Lessons tool in the Tool Menu to display the page.</p>
<p><em>Note: The Lesson page must already contain content before adding sections.</em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="decide-how-to-group-items">
    <h2 class="step-title screensteps-heading">Decide how to group items.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/350/original/475b2304-a00b-4223-9cd6-54bc8d6a9a81.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/350/medium/475b2304-a00b-4223-9cd6-54bc8d6a9a81.png" alt="" height="392" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_EE0DD909-EE2A-41A8-B8F1-A432A6F90999" class="text-block-content">
    <p>Identify how you want to group the items in a section into two columns. </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="click-the-button-and-add-column-break-above">
    <h2 class="step-title screensteps-heading">Click the + button and Add Column Break Above.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/352/original/53fbf053-ce17-435b-9cbf-001d8f5060ae.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/352/medium/53fbf053-ce17-435b-9cbf-001d8f5060ae.png" alt="" height="906" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_5029EDC0-545A-4EB4-BA55-B0C6DF1639C1" class="text-block-content">
    <p>Click the <strong>+</strong> button to the right of the item where you want to add a column break. You will see the Add menu window pop up. Click<strong> Add column break above</strong>. </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="view-two-column-layout">
    <h2 class="step-title screensteps-heading">View two-column layout.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/348/original/00aef13a-572b-4b23-90ef-15050334bc00.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/348/medium/00aef13a-572b-4b23-90ef-15050334bc00.png" alt="" height="287" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_3B2F7D20-AFB7-4C94-BAAA-B326DF700A04" class="text-block-content">
    <p>You will see the items are now grouped into two columns on the page. </p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
